import React from 'react';
// 导入图片
import Img from './img1.jpg'

class Mouse extends React.Component {
  state = {
    x: 50,
    y: 50
  }
  getPiont = (e) => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }
  componentDidMount() {
    window.addEventListener('mousemove', this.getPiont)
  }
  componentWillUnmount() {
    window.removeEventListener('mousemove', this.getPiont)
  }
  render() {
    return this.props.children(this.state)
  }
}

class Handler extends React.Component {
  render() {
    return (
      <div>
        <Mouse>
          {
            mouse => (
              <p>{ mouse.x } --- { mouse.y }</p>
            )
          }
        </Mouse>
        {/* 图片移动效果 */}
        <Mouse>
          {
            mouse => (
              <img
                src={Img}
                alt=""
                style={{
                width: '100px',
                height: '100px',
                borderRadius: '50%',
                position: 'absolute',
                top: mouse.y - 50,
                left: mouse.x - 50,
                zIndex: -1
              }} />
            )
          }
        </Mouse>
      </div>
    )
  }
}

export default Handler